<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>${fns:getConfig('productName')} 登录</title>
	<meta name="decorator" content="blank"/>
	<style type="text/css">
      html,body,table{background-color:#f5f5f5;width:100%;text-align:center;}
      .form-signin-heading{font-family:Helvetica, Georgia, Arial, sans-serif, 黑体;font-size:36px;margin-bottom:20px;color:#fff;}
      /*body{background:url(${ownStatic}/images/login_bg.jpg) no-repeat;background-size:cover;overflow:hidden;}*/
	  body{
		  background: -webkit-linear-gradient(30deg, #2f4050 , #3a5368); /* Safari 5.1 to 6.0 */
		  background: -o-linear-gradient(30deg, #2f4050 , #3a5368); /* Opera 11.1 to 12.0 */
		  background: -moz-linear-gradient(30deg, #2f4050 , #3a5368); /* Firefox 3.6 to 15 */
		  background: linear-gradient(30deg, #2f4050 , #3a5368); /* 标准语法 */
		  overflow:hidden;
	  }
      .form-signin{z-index:10;position:absolute;left:50%;top: 50%;transform: translateY(-50%);text-align:left;width:340px;margin-left:70px;
        	-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
      .form-signin .checkbox{margin-bottom:7px;color:#0663a2;} .form-signin .input-label{font-size:16px;line-height:23px;color:#999;}
      .login-tit{color:#fff;font-size:18px;margin-bottom:40px;}
      .form-signin .input-block-level{color:#4d6e84;transition:all .3s ease;background:transparent;width:100%; font-size:14px;height:auto;padding:7px;;padding-left:20px;border:none;border-bottom:1px solid #4d6e84;_padding:7px 7px 9px 7px;}
/*       .form-signin .input-block-level:-webkit-autofill { */
/*         -webkit-box-shadow: 0 0 0 1000px #2f4558 inset; */
/*     	} */
      .form-signin .input-block-level::-webkit-input-placeholder { /* WebKit browsers */ 
		color: #4d6e84; 
		} 
		.form-signin .input-block-level:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
		color: #4d6e84;
		} 
      .form-signin .btn.btn-large{font-size:16px;width:100%;border-radius:1000px;margin-top:25px;height:45px; outline: none;}
	  .form-signin .btn.btn-large:focus{border: none; outline: none;}
	  .form-signin #themeSwitch{position:absolute;right:15px;bottom:10px;}
      .form-signin div.validateCode {padding-bottom:15px;} .mid{vertical-align:middle;}
      .header{height:80px;padding-top:20px;} .alert{position:relative;width:300px;margin:0 auto;*padding-bottom:0px;}
      label.error{background:none;width:270px;font-weight:normal;color:inherit;margin:0;}
      .form-signin  .login-label{color:#fff;font-weight:400;margin:20px auto 0 auto;}
      .logo-brand{position:absolute;right:50%;top:50%;transform:translateY(-50%);margin-right:70px;color:#fff;}
      .logo-brand h2{font-size:31px;margin-bottom:5px;}
      .form-signin .form-group{position:relative;}
      .form-signin .form-group i{position:absolute;bottom:7px;color:#4d6e84;transition:color .3s ease;}
      .login-footer{background:none;position:absolute;bottom:10px; left: 50%; transform: translateX(-50%);border-top:none;color:#4d6e84;}
      .login-footer a{color:#6895AD;}
      .login-footer a:hover{opacity:0.8;}
	  .password-form{top: 10px;}
      .form-signin-heading{width: 100%;text-align: center;position: absolute;left:0;top: -60px;transform: translateY(-50%);}
      .login-box-shadow{position:absolute;right:8%;width:437px;height:300px;background:#3a4a64;transform-origin:right top;transform:rotate(-34deg);}
	 /* input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #2f4050 inset;}*/

	</style>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#loginForm").validate({
				rules: {
					validateCode: {remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"}
				},
				messages: {
					username: {required: "请填写用户名."},password: {required: "请填写密码."},
					validateCode: {remote: "验证码不正确.", required: "请填写验证码."}
				},
				errorLabelContainer: "#messageBox",
				errorPlacement: function(error, element) {
					error.appendTo($("#loginError").parent());
				} 
			});
		});
		// 如果在框架或在对话框中，则弹出提示并跳转到首页
		if(self.frameElement && self.frameElement.tagName == "IFRAME" || $('#left').length > 0 || $('.jbox').length > 0){
			alert('未登录或登录超时。请重新登录，谢谢！');
			top.location = "${ctx}";
		}
		$(function(){
			var formGroup = $('.form-signin').find('.form-group');
			formGroup.children('input').focus(function(){
				$(this).css('border-bottom-color','#b5e1f4');
				$(this).prev('i').css('color','#b5e1f4')
			});
			formGroup.children('input').blur(function(){
				$(this).css('border-bottom-color','#4d6e84');
				$(this).prev('i').css('color','#4d6e84');
			})
		});
		if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
			$(window).load(function(){
				$('input:-webkit-autofill').each(function(){
					var text = $(this).val();
					var name = $(this).attr('name');
					$(this).after(this.outerHTML).remove();
					$('input[name=' + name + ']').val(text);
				});
			});
		}
	</script>
</head>
<body class="login-body">
	<!--[if lte IE 6]><br/><div class='alert alert-block' style="text-align:left;padding-bottom:10px;"><a class="close" data-dismiss="alert">x</a><h4>温馨提示：</h4><p>你使用的浏览器版本过低。为了获得更好的浏览体验，我们强烈建议您 <a href="http://browsehappy.com" target="_blank">升级</a> 到最新版本的IE浏览器，或者使用较新版本的 Chrome、Firefox、Safari 等。</p></div><![endif]-->
	<div class="header">
		<div id="messageBox" class="alert alert-error ${empty message ? 'hide' : ''} alert-box"><button data-dismiss="alert" class="close">×</button>
			<label id="loginError" class="error">${message}</label>
		</div>
	</div>
	<div class="logo-brand">
			<img src="${ownStatic}/images/logo.png">
			<h2>数据聚合平台</h2>
			<div>System Aggregation Platform</div>
		</div>
	<form id="loginForm" class="form-signin nui-form" action="${ctx}/login" method="post">
<%-- 		<h1 class="form-signin-heading">${fns:getConfig('productName')}</h1> --%>
		<div class="login-tit">登录/Login</div>
		<div class="form-group" style="margin-bottom:25px;"><i class="iconfont">&#xe67b;</i><input type="text" id="username" name="username" class="input-block-level required " value="${username}" placeholder="请输入用户名" autocomplete="off"></div>
		<div class="form-group password-form"><i class="iconfont">&#xe643;</i><input type="password" id="password" name="password" class="input-block-level required " placeholder="请输入密码" autocomplete="off"></div>
		<c:if test="${isValidateCodeLogin}"><div class="validateCode">
			<label class="input-label mid" for="validateCode">验证码</label>
			<sys:validateCode name="validateCode" inputCssStyle="margin-bottom:0;"/>
		</div></c:if><%--
		<label for="mobile" title="手机登录"><input type="checkbox" id="mobileLogin" name="mobileLogin" ${mobileLogin ? 'checked' : ''}/></label> --%>
		
		<input class="btn btn-large btn-primary" type="submit" value="登 录"/>
		<div class="tc mt-10 color-white">
			<input type="checkbox" id="rememberMe" name="rememberMe" ${rememberMe ? 'checked' : ''} title="记住我（公共场所慎用）"/>
		</div>
		
		
<!-- 		<div id="themeSwitch" class="dropdown"> -->
<%-- 			<a class="dropdown-toggle" data-toggle="dropdown" href="#">${fns:getDictLabel(cookie.theme.value,'theme','默认主题')}<b class="caret"></b></a> --%>
<!-- 			<ul class="dropdown-menu"> -->
<%-- 			  <c:forEach items="${fns:getDictList('theme')}" var="dict"><li><a href="#" onclick="location='${pageContext.request.contextPath}/theme/${dict.value}?url='+location.href">${dict.label}</a></li></c:forEach> --%>
<!-- 			</ul> -->
<!-- 			<!--[if lte IE 6]><script type="text/javascript">$('#themeSwitch').hide();</script><![endif]--> 
<!-- 		</div> -->
	</form>
<!-- 	<div class="login-box-shadow" id="loginBoxShadow"></div> -->
	<div class="footer login-footer">
		Copyright &copy; 2012-${fns:getConfig('copyrightYear')} <a href="#">${fns:getConfig('productName')}</a> - Powered By <a href="${fns:getConfig('group.url')}" target="_blank">${fns:getConfig('group')}</a> ${fns:getConfig('version')} 
	</div>
</body>
</html>